<template>
	<view class="page-message">
		<view class="count">
			<view class="item" v-for="(item, index) in features" :key="index">
				<view class="icon">
					<image :src="item.icon" />
				</view>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="content">{{ item.content }}</view>
				<view class="time">{{ item.time }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			features: [
				{ icon: require("@/static/icon/system.png"), name: "系统消息" },
				{ icon: require("@/static/icon/activity.png"), name: "活动消息" },
				{ icon: require("@/static/icon/comment2.png"), name: "评论" },
				{ icon: require("@/static/icon/like2.png"), name: "点赞" },
			],
			list: [
				{ content: "欢迎加入我们平台!", time: "2019-03-03 10:00" },
				{ content: "你关注的主播发布新内容啦!!", time: "2019-03-03 10:00" },
				{ content: "您发布的“xx小视频”收到新的评论。!", time: "2019-03-03 10:00" },
				{ content: "你关注的主播发布新内容啦!!", time: "2019-03-03 10:00" },
				{ content: "您发布的“xx小视频”收到新的评论。!", time: "2019-03-03 10:00" },
				{ content: "你关注的主播发布新内容啦!", time: "2019-03-03 10:00" },
				{ content: "您发布的“xx小视频”收到新的评论。!", time: "2019-03-03 10:00" },
				{
					content: "您发布的“xx小视频”收到新的评论。您发布的“xx小视频”收到新的评论。!",
					time: "2019-03-03 10:00",
				},
				{ content: "你关注的主播发布新内容啦!", time: "2019-03-03 10:00" },
			],
		};
	},
};
</script>

<style lang="scss">
.page-message {
	padding-top: 30rpx;
	background-color: #fafafa;
	.count {
		display: flex;
		width: calc(100% - 76rpx);
		margin: 0 38rpx;
		padding: 30rpx 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 16rpx 0 rgba(0, 0, 0, 0.08);
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 64rpx;
			.icon {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 6rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.name {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}
	}
	.list {
		padding: 26rpx 40rpx;
		.item {
			margin-bottom: 32rpx;
			padding: 45rpx 46rpx 40rpx 46rpx;
			background: #fff;
			box-shadow: 0px 6rpx 10rpx 0px rgba(0, 0, 0, 0.02);
			border-radius: 12rpx;
			.content {
				margin-bottom: 18rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
			.time {
				font-size: 20rpx;
				font-weight: 400;
				color: #adafbc;
			}
		}
	}
}
</style>
